<template>
    <div class="flex flex-col rounded-lg overflow-hidden">
        <div class="flex flex-row" v-for="(row, y) in colors">
            <div
                class="h-6 w-6 hover:scale-150 outline-white hover:outline-dashed hover:outline-1 transition-transform duration-300 cursor-pointer hover:z-10"
                :style="{ background: color }"
                @click="choseColor(x, y)"
                v-for="(color, x) in row"
            ></div>
        </div>
    </div>
</template>


<script lang="ts" setup>
import chroma from 'chroma-js';
import { ref, watch } from 'vue';
import { useColorPanelStore } from '../store';

const store = useColorPanelStore()
const colors = ref([] as string[][])
const num = 7

const updateColor = (val: [number, number, number]) => {
    const it = chroma.rgb(...val)
    const [_, s, l] = it.hsl()
    const pat = [...Array(num).keys()].map(i => {
        const temp = it.set('hsl.s', s * ((i + 1) / num))
        return [...Array(num).keys()].map(ii => {
            return temp.set('hsl.l', l * (ii + 1) / num).css()
        })
    }).reverse()
    colors.value = pat
}
updateColor(store.usingColor)
watch(() => store.usingColor, updateColor)

const choseColor = (x: number, y: number) => {
    store.setColor(chroma(colors.value[y][x]).rgb())
}
</script>
